<template>
  <div class="positionDetail">
      <head-usual :title="position" :to="to"></head-usual>
      <!-- 职位详情封面 -->
      <div class="position-cover">
          <!-- 封面部分 -->
          <div class="cover-hd">
              <p>
                  <span>{{job.name}}</span>
                  <span>{{job.lowSalary}}</span>
              </p>
              <div>
                  <span>{{job.experience}}</span>
                  <span class="fenge"></span>
                  <span>{{job.degree}}</span>
                  <span class="fenge"></span>
                  <span>{{job.nature}}</span>
              </div>
              <p>
                  <span v-for="(tag,index2) in job.Arr_tags" :key="index2">{{tag}}</span>
              </p>
              <p>
                  <span>{{job.addtime.replace("T"," ")}}</span>
                  <span>发布于{{job_Member.name}}</span>
              </p>
              <div>
                  <!-- <p>
                      <svg class="icon price-bottom-01" aria-hidden="true">
                          <use xlink:href="#icon-jubao"></use>
                      </svg>
                      <span>举报职位</span>
                  </p>
                  <p>
                      <svg class="icon price-bottom-02" aria-hidden="true">
                          <use xlink:href="#icon-weibiaoti1"></use>
                      </svg>
                      <span class="resume">完善在线简历</span>
                  </p> -->
              </div>
              <!-- <mt-button type="primary">投递简历</mt-button> -->
          </div>
          <!-- 封面下方 -->
          <router-link class="cover-foot" :to="job_Member.url+job_Member.Id">
              <dl>
                  <dt><img :src="job_Member.headportrait"/></dt>
                  <dd>
                      <p>{{job_Member.name}}</p>
                      <p>
                          <span>{{job_Member.workinglife}} 人</span>
                          <span  class="fenge"></span>
                          <span>{{job_Member.industry}}</span>
                      </p>
                      <svg class="icon price-bottom-01" aria-hidden="true">
                          <use xlink:href="#icon-shang-copy-copy-copy"></use>
                      </svg>
                  </dd>
              </dl>
          </router-link>
      </div>
      <!-- 职位描述 -->
      <div class="work-detail">
          <div class="work-item">
              <p>职位描述:</p>
              <div class="work-item2">
                  <div class="p1" v-html="job.description">
                  </div> 
              </div>
          </div>
          <!-- 工作地址 -->
          <div class="work-place">
            <p>工作地址:</p>
            <P>
              <span>{{job.provinces}} {{job.address}} </span>
            </P>
          </div>
      </div>
      
      <!-- 职位列表 -->
      <recJobs :id="id"></recJobs>

      <!-- 职位评论 -->
      <comment :id="id"></comment>

      <!-- 搜索相关职位 -->
      <!-- <div class="positionSearch">
          <div class="search-top">搜索相关职位</div>
          <div class="search-bottom">
              <input type="text" placeholder="找专业人做专业事"/>
              <a>
                <svg class="icon price-bottom-01" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
              </a>
          </div>
      </div> -->
      <!-- 底部 -->
      <company-footer :cid="id" :type="2" words="投递简历"></company-footer>
  </div>
</template>

<script>
import { Button } from "mint-ui";
import headUsual from "@/pages/components/headUsual";
import recJobs from "@/pages/jobs/controls/recJobs";
import companyFooter from "@/pages/components/footerBar";
import comment from "@/pages/jobs/controls/comment";

import { GetDetail } from "@/api/jobs";
export default {
  data() {
    return {
      position: "职位详情",
      to:'/jobs',
      job: {
        addtime:''
      },
      job_Member: {},
      id: 0
    };
  },
  created() {
    this.id = parseInt(this.$route.params.id);
    this._GetDetail();
  },
  methods: {
    _GetDetail() {
      this.$indicator.open();
      GetDetail(this.id).then(res => {
        if (res.StatusCode === 200) {
          this.job = res.Data.Job;
          this.job_Member = res.Data.Member;
          this.$indicator.close();
        }
      });
    },
    handleclick(e) {
      $(".position-class")
        .children("ul")
        .children("li")
        .each(function(index) {
          $(".position-class")
            .children("ul")
            .children("li")
            .eq(index)
            .removeClass("active");
        });
      var target = e.target || e.srcElement;
      if (target.tagName !== "UL") {
        $(target).addClass("active");
      }
    }
  },
  components: { headUsual, recJobs, companyFooter,comment }
};
</script>

<style scoped lang="scss">
.positionDetail {
  padding-bottom: 48px;
}

// 封面部分
.cover-hd {
  width: 100%;
  padding: 23px 11px;
  background: url("~@/assets/position_bg.jpg") no-repeat center center;
  color: #ffffff;
  > :first-child {
    color: #ffffff;
    font-size: 18px;
    overflow: hidden;
    margin-bottom: 11px;
    > span {
      display: block;
      float: left;
    }
    > :last-child {
      display: block;
      font-size: 14px;
      height: 28px;
      line-height: 28px;
      padding: 0.5px 6px;
      background: #fd4f00;
      margin-left: 6px;
      border-radius: 12px;
    }
  }
  > :nth-child(2) {
    font-size: 14px;
    overflow: hidden;
    margin-bottom: 11px;
    > span {
      display: block;
      float: left;
    }
    .fenge {
      width: 1px;
      height: 13px;
      border: 1px solid #ffffff;
      margin-top: 4px;
      margin-left: 12px;
      margin-right: 12px;
    }
  }
  > :nth-child(3) {
    // overflow: hidden;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    text-align: center;
    > span {
      display: block;
      padding: 0 10px;
      height: 26px;
      line-height: 26px;
      border-radius: 13px;
      border: 1px solid #ffffff;
      margin-right: 10px;
      font-size: 14px;
    }
  }
  > :nth-child(4) {
    margin-bottom: 40.6px;
    > span {
      display: inline-block;
      margin-right: 8px;
      font-size: 14px;
    }
  }
  > :nth-child(5) {
    overflow: hidden;
    > p {
      float: left;
      > span {
        display: block;
        float: left;
        margin-right: 21px;
        font-size: 14px;
      }
      > .icon {
        float: left;
        display: block;
        margin-top: 3px;
        margin-right: 9px;
        font-size: 14px;
      }
      .price-bottom-02 {
        font-size: 17px !important;
      }
      .resume {
        text-decoration: underline;
      }
    }
  }
  > :nth-child(6) {
    font-size: 14px;
    padding: 10px 16px;
    background: #3887fe;
    position: absolute;
    right: 11px;
    margin-top: -30px;
    border-radius: 3%;
  }
}
.cover-foot {
  padding: 13px 12px;
  overflow: hidden;
  border-bottom: 10px solid #f4f4f4;
  display: block;
  > dl {
    > dt {
      float: left;
      width: 50px;
      height: 50px;
      > img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }
    }
    > dd {
      float: left;
      margin-left: 16px;
      margin-top: 3px;
      > :first-child {
        color: #282828;
        font-size: 16px;
      }
      > :nth-child(2) {
        color: #999999;
        font-size: 14px;
        display: flex;
        align-items: center;
        > span {
          display: block;
          float: left;
        }
        .fenge {
          width: 1px;
          height: 11px;
          border: 1px solid #999999;

          margin-right: 10px;
          margin-left: 10px;
        }
      }
      > :last-child {
        position: absolute;
        right: 6px;
        font-size: 20px;
        margin-top: -30px;
      }
    }
  }
}

// 搜索相关职位
.positionSearch {
  border-bottom: 80px solid #f4f4f4;
  .search-top {
    padding-left: 12px;
    height: 45px;
    line-height: 45px;
    background: #f4f4f4;
    color: #999999;
    font-size: 16px;
  }
  .search-bottom {
    padding: 12px 12px;
    overflow: hidden;
    > :first-child {
      border: 1px solid #eeeeee;
      width: 350px;
      height: 40px;
      display: block;
      float: left;
      padding: 8px 0 8px 12px;
      color: #999999;
      font-size: 14px;
    }
    > :last-child {
      width: 40px;
      height: 40px;
      background: #3887fe;
      display: block;
      float: left;
      > .icon {
        font-size: 16px;
        color: #ffffff;
        display: inline-block;
        margin-top: 10.6px;
        margin-left: 10.6px;
      }
    }
  }
}
//工作详情
.work-item {
  > :first-child {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #666666;
    font-weight: bolder;
    border-bottom: 1px dashed #eeeeee;
    padding-left: 12px;
  }
  .work-item2 {
    width: 100%;
    padding: 13px 12px;
    border-bottom: 10px solid #f4f4f4;
    color: #666666;
    font-size: 14px;
    line-height: 1.8;

    .p1 {
      margin-bottom: 28px;
    }
  }
}
.work-place {
  padding-bottom: 14px;
  border-bottom: 10px solid #f4f4f4;
  > :first-child {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #666666;
    font-weight: bolder;
    border-bottom: 1px dashed #eeeeee;
    padding-left: 12px;
    margin-bottom: 14px;
  }
  > :nth-child(2) {
    padding-left: 12px;
    font-size: 14px;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
// 评论体系
// 本组件通用样式
.icon {
  display: block;
  float: left;
  margin-right: 3px;
  margin-top: 3px;
}
i {
  font-style: normal;
}

// 职位类别
.position-class {
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  padding: 22px 12px;
  background: #f4f4f4;
  > div {
    float: left;
    color: #666666;
    margin-right: 13px;
    margin-top: 5.595px;
    font-size: 14px;
  }
  > ul {
    float: left;
    color: #282828;

    li {
      float: left;
      padding: 5.6px 10px;
      font-size: 14px;
    }
    .active {
      background: #fd4f00;
      color: #ffffff;
    }
  }
}

</style>
